<template>
  <div class="storeorder-page page-main">
    <search-form :model="searchParams" @search="search">
      <a-form-item label="时间选择：" class="width100">
        <a-radio-group v-model:value="searchParams.dateLimit" button-style="solid" class="mr20"
          @change="selectChange(searchParams.dateLimit)">
          <a-radio-button v-for="(item, i) in DAYS_TYPE" :key="i" :value="item.value">
            {{ item.label }}
          </a-radio-button>
        </a-radio-group>
        <a-range-picker v-model:value="timeVal" value-format="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item label="订单号：">
        <a-input v-model:value="searchParams.keywords" placeholder="请输入姓名、电话、订单ID" class="selWidth" clearable />
      </a-form-item>
    </search-form>

    <g-table ref="tableRef" :columns="columns" :api="getPageList" :params="searchParams" />
  </div>
</template>

<script setup lang="tsx">
import { userrechargeDel, getPageList } from "./api";
import type { Iuserrecharge } from "./entity";
import { PAY_TYPE, DAYS_TYPE } from "@/utils/constant";

const searchParams = reactive({
  prop: "",
  uid: "",
  keywords: "",
  dateLimit: "",
  date: "",
});

let visible = $ref(false);
const { tableRef, columns, search } = useTable<Iuserrecharge>([
  { title: "UID", dataIndex: "uid" },
  {
    title: "头像",
    dataIndex: "avatar",

    customRender: ({ record }) =>
      record.avatar ? <img class="img-thumbnail" src={record.avatar} /> : "",
  },
  { title: "用户昵称", width: 100, dataIndex: "nickname" },
  { title: "推广用户(一级)数量", width: 200, dataIndex: "spreadCount" },
  { title: "推广订单数量", width: 150, dataIndex: "spreadOrderNum" },
  { title: "推广订单金额", width: 150, dataIndex: "spreadOrderTotalPrice" },
  { title: "佣金总金额", width: 150, dataIndex: "totalBrokeragePrice" },
  { title: "已提现金额", width: 150, dataIndex: "extractCountPrice" },
  { title: "已提现次数", width: 150, dataIndex: "extractCountNum" },
  { title: "未提现金额", width: 150, dataIndex: "brokeragePrice" },
  { title: "冻结中佣金", width: 150, dataIndex: "freezeBrokeragePrice" },
  { title: "成为推广员时间", width: 150, dataIndex: "promoterTime" },
  { title: "上级推广人", width: 150, dataIndex: "spreadNickname" },
  {
    title: "操作",
    dataIndex: "op",
    fixed: "right",
    width: 200,
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => onSpread(record)}>推广人</table-button>
        <table-button onClick={() => onSpreadOrder(record)}>
          推广订单
        </table-button>
        <table-button
          onClick={() => clearSpread(record)}
          v-if={!!record.spreadNickname}
        >
          清除上级推广人
        </table-button>
      </>
    ),
  },
]);
let timeVal = $ref<string[]>(["", ""]);
let activeRow = $ref<Partial<Iuserrecharge>>({});
function add(row: Partial<Iuserrecharge> = {}) {
  activeRow = { ...row };
  visible = true;
}
function onchangeTime(e: string[]) {
  timeVal = e;
  searchParams.dateLimit = e ? e.join(",") : "";
  search(false);
}
function onSpread(row: any) { }
function onSpreadOrder(row: any) { }
function clearSpread(row: any) { }
// 选择时间
function selectChange(tab: string) {
  searchParams.date = tab;
  timeVal = [];
  search(false);
}
function remove({ id }: Iuserrecharge) {
  userrechargeDel(id as number).then(() => {
    AntMessage.success("已删除");
    search(false);
  });
}
</script>

<style lang="scss"></style>
